Page({

    data: {},

    // 获取气泡菜单
    onReady() {
        this.popover = this.selectComponent('#popover')
    },

    /**
     * 打开气泡菜单
     * @description 获取当前元素计算位置
     * @param {Object} e - 元素标识(事件对象)
     * @return void
     */
    open(e) {
        // 获取元素的坐标信息
        wx.createSelectorQuery().select('#' + e.target.id).boundingClientRect(res => {
            this.popover.onDisplay(res)
        }).exec()
    },

    /**
     * 隐藏气泡菜单
     * @description 调用此即可完成隐藏
     * @retrun void
     */
    close() {
        this.popover.onHide()
    },

    /**
     * 自定义A
     * @description 示例用法
     * @param {Object} e - 事件对象
     * @return void 
     */
    onClickA(e) {
        console.log('onClick A ', e)
        // 业务逻辑
        wx.showToast({ title: '菜单 A' })
        // 隐藏气泡菜单
        this.close()
    },

    /**
     * 自定义B
     * @description 示例用法
     * @param {Object} e - 事件对象
     * @return void 
     */
    onClickB(e) {
        console.log('onClick B ', e)
        // 业务逻辑
        wx.showToast({ title: '菜单 B' })
        // 隐藏气泡菜单
        this.close()
    },

    /**
     * 自定义C
     * @description 示例用法
     * @param {Object} e - 事件对象
     * @return void 
     */
    onClickC(e) {
        console.log('onClick C ', e)
        // 业务逻辑
        wx.showToast({ title: '菜单 C' })
        // 隐藏气泡菜单
        this.close()
    },

})